<style lang="scss">
@import '../static/common/variable.scss';

.detail {
    width: 100%;
    padding: $pad;

    .box {
        font-size: 20px;

        h3 {
            padding: 10px 0;
            font-size: 18px;
            text-align: center;
        }

        .author,
        .date,
        .read,
        .addr,
        .detail-classify {
            font-size: 17px;
            margin-bottom: 6px;

            span {
                color: #666;
            }
        }

        .read {
            width: 100%;
            display: flex;
            // justify-content: space-between;
            padding-top: 10px;
            padding-bottom: 10px;

            div {
                margin-right: 20px;
            }

            div.active {
                color: $ActiveColor;
            }
        }

        .content {
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 17px;
            line-height: 1.70;
            box-shadow: 0 0 2px #f0f0f0;

            code {
                background-color: #f0f0f0;
                padding: 10px 12px;
                border-radius: 5px;
                display: inline-block;
            }

            p {
                padding: 5px 0;
                text-indent: 36px;
            }

            h2,
            h3,
            h4,
            h5,
            h6,
            strong {
                font-size: 17px;
            }

            img {
                max-width: 400px;
                width: 100%;
                display: block;
            }
        }
    }

    .foot {
        font-size: 20px;

        h3 {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .inp-box {
            width: 100%;
            display: flex;
            align-items: center;

            input {
                flex-grow: 1;
                height: 44px;
                border: 1px solid #f0f0f0;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                font-size: 16px;
                padding-left: 10px;
            }

            button {
                flex-shrink: 0;
                height: 44px;
                padding: 0 15px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                font-size: 16px;
            }
        }

        .list-box {
            .user {
                font-weight: bold;
                height: 30px;
                line-height: 30px;
            }

            ul {
                list-style: none;

                >li {
                    padding: 10px 10px;
                    font-size: 15px;
                    // background-color: #f0f0f0;
                    border-bottom: 1px solid #f0f0f0;
                    margin-bottom: 10px;
                    margin-top: 10px;
                    background-color: #f0f0f0;

                    p.time {
                        font-size: 14px;
                        padding-top: 5px;
                    }
                }

                ol {
                    list-style: none;
                    background-color: #fff;

                    li {
                        margin-top: 10px;
                        font-size: 14px;
                        color: #666;
                        border-bottom: 1px solid #f0f0f0;
                        padding-left: 10px;
                        position: relative;

                        i {
                            position: absolute;
                            right: 5px;
                            top: 5px;
                            font-size: 20px;
                            font-style: normal;
                        }

                        p {
                            padding: 0px 0 5px 0px;

                            span {
                                font-size: 12px;
                            }
                        }

                    }

                    .reply {
                        margin-top: 2px;
                    }
                }
            }
        }
    }
}
</style>

<template>
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="文章详情" sub-title="" @back="jumpTo" />
    <div class="detail" v-if="detail.article_title">
        <div class="box">
            <h3>{{ detail.article_title }}</h3>
            <div class="author">
                作者: <span style="font-size: 16px;">{{ detail.article_author }}</span>
            </div>
            <div class="date">发布时间: <span style="font-size: 16px;">{{ formatime(detail.article_create_time) }}</span></div>
            <div class="content" v-html="detail.article_content"></div>
            <div class="read">
                <div>
                    阅读: <span>{{ detail.article_read ? detail.article_read : 0 }}</span>
                </div>
                <div>
                    <span @click="addCollect" v-if="isCollect">点击收藏</span>
                    <span @click="removeCollect" v-else>取消收藏</span>
                </div>
            </div>
            <div class="detail-classify">
                分类: <span style="font-size: 16px;">{{ detail.classify_text }}</span> <span>{{ detail.classify_title
                }}</span>
            </div>
            <div class="addr">发布地: <span style="font-size: 16px;">{{ detail.article_address }}</span></div>
        </div>

        <a-divider></a-divider>


        <div class="foot">
            <h3>评论</h3>
            <div class="inp-box">
                <input v-model="comment" type="text"><button @click="addComment">发布评论</button>
            </div>
            <div class="list-box">
                <ul v-if="commentList.length != 0">
                    <!-- 双击删除评论 -->
                    <li v-for="item in commentList" style="position: relative;">
                        <div style="position: absolute; right: 10px; top: 15px;">
                            <button @click="showDrawer(item.from_user_id, item.c_id)">回复</button> /
                            <button @click="removeComment(item.c_id)"
                                style="color: #000;background-color:transparent;">删除</button>
                        </div>

                        <div class="user"><span>{{ item.c_user_name }}评论: </span></div>
                        <p>{{ item.c_text }}</p>
                        <p class="time">{{ item.c_create_time }}</p>
                        <ol>
                            <li v-for="col in item.elements">
                                <div class="reply">
                                    <!-- 删除回复 -->
                                    <i @click="removeReply(col.r_id)"> × </i>
                                    <div class="user"><span>{{ col.r_user_name }}回复: </span></div>
                                    <p>{{ col.r_text }}</p>
                                    <p><span>{{ formatime(col.r_create_time) }}</span></p>
                                </div>
                            </li>
                        </ol>
                    </li>

                </ul>
                <div v-else style="margin-top: 30px;">
                    <a-empty :description="`暂无用户评论`" />
                    <!-- <p style="width: 100%; text-align: center;font-size: 16px; padding: 30px 0;">暂无用户评论~</p> -->
                </div>
            </div>
        </div>

        <a-drawer title="回复评论" placement="bottom" :closable="false" :visible="visible" :get-container="false"
            :wrap-style="{ position: 'absolute' }" @close="onClose">
            <div>
                <!-- <a-input v-model:value="value" placeholder="" /> -->
                <a-textarea v-model:value="value" placeholder="请输入" :rows="4"  @keydown.enter="addReply"/>
            </div>
            <div style="margin-top: 20px;">
                <a-button @click="addReply" type="primary">发表回复</a-button>
            </div>
        </a-drawer>
    </div>
    <div v-else class="not">
        <p style="padding: 30px ; text-align: center; font-size: 18px;">该文章已经删除~</p>
    </div>
</template>

<script lang="ts">
import { reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
    articleDetailFn,
    addCollectFn,
    removeCollectFn,
    listCollectFn,
    addCommentFn,
    removeCommentFn,
    listCommentFn,
    addReplyFn,
    removeReplyFn,
    userInfoFn,
    listReplytFn
} from '../api/index';
import { message } from 'ant-design-vue';

export default {
    setup() {
        const router = useRouter();
        const route = useRoute();
        let comment = ref('')

        const jumpTo = () => {
            router.go(-1)
        }

        // 格式化时间
        const formatime = (date: Date | string | any) => {
            if (date) {
                let dt = new Date(date);
                return dt.toLocaleDateString() + " " + dt.toLocaleTimeString();
            }
            else {
                return '0000-00-00 00:00:00';
            }
        }


        // 文章详情
        let detail = reactive({
            article_address: '',
            article_author: '',
            article_content: '',
            article_create_time: '',
            article_hot: '',
            article_id: '',
            article_read: '',
            article_src: '',
            article_title: '',
            classify_text: '',//一级分类名称
            classify_title: '',//二级分类名称
            user_id: '',//写文章用户id
        })


        let uid = ref('');
        // 编写获取详情的方法
        const articleDetail = async (article_id: string | any) => {
            await articleDetailFn({ article_id }).then(
                (content: any) => {
                    console.log('文章详情:', content);
                    let { code, result } = content;
                    if (code == 200) {
                        // 整合数据
                        if (result.length != 0) {
                            let {
                                article_address,
                                article_author,
                                article_content,
                                article_create_time,
                                article_hot,
                                article_id,
                                article_read,
                                article_src,
                                article_title,
                                classify_text,
                                classify_title,
                                user_id
                            } = result[0]
                            detail.article_address = article_address
                            detail.article_author = article_author
                            detail.article_content = article_content
                            detail.article_create_time = article_create_time
                            detail.article_hot = article_hot
                            detail.article_id = article_id
                            detail.article_read = article_read
                            detail.article_src = article_src
                            detail.article_title = article_title
                            detail.classify_text = classify_text
                            detail.classify_title = classify_title
                            detail.user_id = user_id
                        }

                    }
                }
            )
        }

        // 记录文章id
        let aid: any = ref('')
        // 侦听器
        watch(route, (newRoute) => {
            let { article_id } = newRoute.query;
            // console.log("article_id:", article_id);
            if (article_id) {
                aid.value = article_id;
                articleDetail(article_id)
            }
        }, { deep: true, immediate: true })


        // 布尔值
        let isCollect = ref(true);

        // 编写收藏的方法
        const addCollect = async () => {
            // console.log('xxx', aid.value)
            if (aid.value) {
                let token = localStorage.getItem('TOKEN');
                let collect_create_time = new Date().toLocaleDateString() + "_" + (new Date().toLocaleTimeString())
                let article_id = aid.value;
                let article_title = detail.article_title;
                let classify_text = detail.classify_text;
                let article_src= detail.article_src;
                console.log('x-x,',detail)

                await addCollectFn({ token, article_id, collect_create_time, article_title,classify_text,article_src })
                    .then(
                        content => {
                            // console.log("4.0", content)
                            let { code, msg } = content;
                            if (code == 200) {
                                message.success(msg);
                                isCollect.value = false;
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )
            }
        }

        let collect_id = '';//不做响应式
        // 取消收藏的方法
        const removeCollect = async () => {
            let token = localStorage.getItem('TOKEN');
            if (collect_id) {
                await removeCollectFn({ collect_id, token })
                    .then(
                        content => {
                            console.log("4.0", content)
                            let { code, msg } = content;
                            if (code == 200) {
                                // message.success('取消收藏成功');
                                isCollect.value = true;
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )
            }

        }

        // 获取收藏列表
        const listCollect = async () => {
            let token = localStorage.getItem('TOKEN');
            await listCollectFn({ token })
                .then(
                    content => {
                        // console.log("6.0", content)
                        let { code, msg, result } = content;
                        if (code == 200) {
                            // map 
                            result.forEach((item: any) => {
                                if (item.article_id == aid.value) {
                                    collect_id = item.collect_id;
                                    isCollect.value = false;//已经收藏
                                }
                            })

                        }
                        else {
                            message.error(msg)
                        }
                    }
                )
        }

        listCollect();

        // 以下代码是处理 评论和回复
        // 评论项
        interface commentItem {
            article_id: string
            c_create_time: string
            c_id: string
            c_text: string
            from_user_id: string
            to_user_id: string
            id: string
            c_user_name: string
            elements: any
        }

        let commentList = ref<commentItem[]>([]);
        // 获取评论内容
        const listComment = async () => {
            if (aid.value) {
                await listCommentFn({ article_id: aid.value })
                    .then(
                        (content) => {
                            // console.log('评论列表',content)
                            let { code, result } = content;
                            if (code == 200) {
                                let arr = result.map((item: commentItem) => {
                                    item.c_create_time = formatime(item.c_create_time)
                                    return item;
                                })
                                // commentList.value = arr.reverse();
                                let data = arr.reverse();
                                return data;
                            }
                        }
                    )
                    .then(
                        (data) => {
                            if (data) {
                                const init = async () => {
                                    for (let i = 0; i < data.length; i++) {
                                        let c_id = data[i].c_id;
                                        let article_id = data[i].article_id;
                                        let from_user_id = data[i].from_user_id;
                                        // 处理评论的用户信息
                                        if (from_user_id) {
                                            await userInfoFn({ user_id: from_user_id })
                                                .then(
                                                    (content) => {
                                                        let { code } = content;
                                                        // console.log("评论",content)
                                                        if (code == 200) {
                                                            data[i].c_user_name = content.data[0].user_name || '用户' + (Math.random().toString().slice(-4))
                                                        }
                                                    }
                                                )
                                        }
                                        let elements: any = []
                                        // 获取每个评论的回复
                                        await listReplytFn({ c_id, article_id })
                                            .then(
                                                (content: any) => {
                                                    // console.log("--->",content);
                                                    let { code, msg, result } = content;
                                                    if (code == 200) {
                                                        // 记录每一条评论的回复
                                                        elements = result.reverse()
                                                    }
                                                    else {
                                                        console.log(msg)
                                                    }

                                                }
                                            )

                                            // 处理回复的用户信息
                                        for (let j = 0; j < elements.length; j++) {
                                            let from_user_id2 = elements[j].from_user_id;
                                            // 获取用户信息
                                           if(from_user_id) {
                                            await userInfoFn({ user_id: from_user_id2 })
                                                .then(
                                                    (res) => {
                                                        // console.log("回复",content)
                                                        if (res.code == 200) {
                                                            // console.log('iii:', res.data[0].user_name)
                                                            elements[j].r_user_name = res.data[0].user_name || '用户' + (Math.random().toString().slice(-4))
                                                        }
                                                    }
                                                )
                                           }
                                        }
                                        data[i].elements = elements;
                                    }
                                    // 循环结束。。。
                                    // 把评论列表接口 、回复列表接口、获取用户信息的接口 这三个接口的数据整合在一起
                                    commentList.value = data;
                                    // console.log('xxx', data)
                                }
                                init()
                            }
                        }
                    )
            }
        }
        // 获取评论
        listComment()

        // 点击发表评论
        const addComment = async () => {
            // console.log('-->', comment.value)
            if (comment.value === '') {
                message.error('输入框不能为空');
            }
            else {
                let token = localStorage.getItem('TOKEN');
                let c_text = comment.value;
                let to_user_id = detail.user_id;
                let article_id = aid.value;
                await addCommentFn({ token, c_text, to_user_id, article_id })
                    .then(
                        (content) => {
                            // console.log('评论',content)
                            let { code, msg } = content;
                            if (code == 200) {
                                message.success(msg)
                                comment.value = '';
                                // 重新获取
                                listComment()
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )
            }
        }

        const visible = ref(false);
        const afterVisibleChange = (bool: boolean) => {
            console.log('visible', bool);
        };

        // 获取评论id,给谁评论
        let to_user_id = '';
        let c_id = '';

        const showDrawer = (fid: string, cid: string) => {
            visible.value = true;
            console.log({ fid, cid })
            if (fid && cid) {
                to_user_id = fid;//记录发表评论的用户id
                c_id = cid;//记录评论id
            }
        };

        const onClose = () => {
            visible.value = false;
        };

        // 记录回复的内容
        const value = ref<string>('');

        // 发表回复
        const addReply = async () => {
            let token = localStorage.getItem('TOKEN');
            if (value.value) {
                let r_text = value.value;
                let r_create_time = formatime(new Date());
                let article_id = aid.value;
                await addReplyFn({ token, r_text, r_create_time, to_user_id, article_id, c_id })
                    .then(
                        (content) => {
                            console.log('回复', content)
                            let { code, msg } = content;
                            if (code == 200) {
                                message.success(msg)
                                value.value = '';
                                visible.value = false;
                                // 重新获取
                                listComment()
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )
            }
            else {
                message.error('请输入回复内容')
            }

        }

        // 删除回复
        const removeReply = async (r_id: string | any) => {
            let token = localStorage.getItem('TOKEN');
            await removeReplyFn({ r_id, token })
                .then(
                    (content: any) => {
                        console.log('删除回复', content)
                        let { code, msg } = content;
                        if (code == 200) {
                            message.success(msg)
                            // 重新获取
                            listComment()
                        }
                        else {
                            message.error(msg)
                        }
                    }
                )
        }

        // 删除评论
        const removeComment = async (c_id: string | any) => {
            // console.log('xxx')
            if (confirm('您要删除该评论吗?')) {
                let token = localStorage.getItem('TOKEN');
                await removeCommentFn({ c_id, token })
                    .then(
                        (content: any) => {
                            console.log('删除评论', content)
                            let { code, msg } = content;
                            if (code == 200) {
                                message.success(msg)
                                // 重新获取
                                listComment()
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )
            }
        }

        return {
            detail,
            jumpTo,
            formatime,
            addCollect,
            removeCollect,
            addComment,
            isCollect,
            comment,
            commentList,

            visible,
            afterVisibleChange,
            showDrawer,
            onClose,
            value,
            addReply,
            removeReply,
            removeComment
        }
    }
}

</script>

